﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="RateProduct.aspx.cs" Inherits="University.Workshop.WebApp.RateProduct" %>

<%--<%@ Register Src="SimpleRating.ascx" TagName="SimpleRating" TagPrefix="uc1" %>--%>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <script src='Scripts/jquery.js' type="text/javascript"></script>
    <script src='Scripts/jquery.MetaData.js' type="text/javascript" language="javascript"></script>
    <script src='Scripts/jquery.rating.js' type="text/javascript" language="javascript"></script>
    <link href='Styles/jquery.rating.css' type="text/css" rel="stylesheet" />
    <asp:TextBox ID="Category" runat="server" Style="display: none;"></asp:TextBox>
    <br />
    <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">Back to Products</asp:LinkButton>
    <center>
        <br />
        <asp:TextBox ID="name" runat="server" Font-Size="X-Large" Font-Bold="True" ForeColor="Blue"
            BorderStyle="None"></asp:TextBox>
        &nbsp;&nbsp;&nbsp;
        <asp:TextBox ID="ProductID" runat="server" Style="display: none;"></asp:TextBox>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <br />
        <br />
        <br />
        <asp:Image ID="image1" runat="server" />
        &nbsp;&nbsp;&nbsp; &nbsp;<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"
            CellPadding="2" CellSpacing="4" AllowPaging="True">
            <Columns>
                <asp:BoundField DataField="Description" HeaderText="Description" />
                <asp:BoundField DataField="Price" HeaderText="Price" />
                <asp:BoundField DataField="Currency" HeaderText="Currency" />
                <asp:BoundField DataField="Quantity" HeaderText="Available" />
            </Columns>
            <HeaderStyle BackColor="#0000CC" BorderColor="White" ForeColor="White" BorderStyle="Double" />
        </asp:GridView>
        <br />
    </center>
    <div id="tab-Testing">
        <script>
            $(function () {
                $('.auto-submit-star').rating({
                    callback: function (value, link) {
                        // 'this' is the hidden form element holding the current value
                        // 'value' is the value selected
                        // 'element' points to the link element that received the click.
                        //alert("The value selected was '" + value + "'\n\nWith this callback function I can automatically submit the form with this code:\nthis.form.submit();");

                        var id = document.getElementById('<%=ProductID.ClientID %>').getAttribute("value");
                        var name = document.getElementById('<%=name.ClientID %>').getAttribute("value");
                        var category = document.getElementById('<%=Category.ClientID %>').getAttribute("value");
                        
                        document.location("RateHandler.ashx?Rate=" + value + "&ItemID=" + id + "&ProductName=" + name + "&ProductCategory=" + category);
                        $('input').rating('disable');
                        // To submit the form automatically:
                        //this.form.submit();

                        // To submit the form via ajax:
                        //$(this.form).ajaxSubmit();
                    }
                });
            });
        </script>
        <div class="Clear">
            &nbsp;</div>
        <form id="form10">
        <center>
            <table cellspacing="10">
                <tr>
                    <td colspan="2">
                        <h3>
                            RATE PRODUCT</h3>
                    </td>
                </tr>
                <tr>
                    <td>
                        Average:
                        <asp:Label ID="average" runat="server"></asp:Label>
                    </td>
                    <td>
                        <asp:Image ID="image2" ImageUrl="Styles/star1.gif" Style="border: 0; float: left;
                            width: 17px; height: 15px" Visible="false" runat="server" />
                        <asp:Image ID="image22" ImageUrl="Styles/star2.gif" Style="border: 0; float: left;
                            width: 17px; height: 15px" Visible="false" runat="server" />
                        <asp:Image ID="image3" ImageUrl="Styles/star1.gif" Style="border: 0; float: left;
                            width: 17px; height: 15px" Visible="false" runat="server" />
                        <asp:Image ID="image33" ImageUrl="Styles/star2.gif" Style="border: 0; float: left;
                            width: 17px; height: 15px" Visible="false" runat="server" />
                        <asp:Image ID="image4" ImageUrl="Styles/star1.gif" Style="border: 0; float: left;
                            width: 17px; height: 15px" Visible="false" runat="server" />
                        <asp:Image ID="image44" ImageUrl="Styles/star2.gif" Style="border: 0; float: left;
                            width: 17px; height: 15px" Visible="false" runat="server" />
                        <asp:Image ID="image5" ImageUrl="Styles/star1.gif" Style="border: 0; float: left;
                            width: 17px; height: 15px" Visible="false" runat="server" />
                        <asp:Image ID="image55" ImageUrl="Styles/star2.gif" Style="border: 0; float: left;
                            width: 17px; height: 15px" Visible="false" runat="server" />
                        <asp:Image ID="image6" ImageUrl="Styles/star1.gif" Style="border: 0; float: left;
                            width: 17px; height: 15px" Visible="false" runat="server" />
                        <asp:Image ID="image66" ImageUrl="Styles/star2.gif" Style="border: 0; float: left;
                            width: 17px; height: 15px" Visible="false" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2" valign="top">
                        <div class="Clear">
                            <input class="auto-submit-star" type="radio" name="test-1-rating-4" value="1" title="Worst" />
                            <input class="auto-submit-star" type="radio" name="test-1-rating-4" value="2" title="Bad" />
                            <input class="auto-submit-star" type="radio" name="test-1-rating-4" value="3" title="OK" />
                            <input class="auto-submit-star" type="radio" name="test-1-rating-4" value="4" title="Good" />
                            <input class="auto-submit-star" type="radio" name="test-1-rating-4" value="5" title="Best" />
                        </div>
                        <br />
                    </td>
                </tr>
            </table>
            <div id="comments" runat="server">
                <asp:TextBox ID="comment" Height="40" CssClass="water" Text="Add your comments here..."
                    ToolTip="Add your comments here..." TextMode="MultiLine" runat="server"></asp:TextBox>
                <br />
                <p align="center">
                    <asp:Label ID="errorMsg" runat="server" Text="Error message" Visible="False" ForeColor="Red"></asp:Label>
                </p>
                <asp:Button ID="SaveComment" runat="server" Text="Comment" OnClick="SaveComment_Click" />
            </div>
        </center>
        </form>
        <div class="Clear">
            &nbsp;</div>
        <div class="Clear">
            &nbsp;</div>
    </div>
    
</asp:Content>
<asp:Content ID="Content3" runat="server" ContentPlaceHolderID="HeadContent">
    <style type="text/css">
        .water
        {
            font-family: Tahoma, Arial, sans-serif;
            color: gray;
        }
    </style>
    <script type="text/Javascript" src='<%=ResolveUrl("~/Scripts/jquery-1.4.1.min.js")%>'></script>
    <script language="javascript" type="text/javascript">
        $(function () {

            $(".water").each(function () {
                $tb = $(this);
                if ($tb.val() != this.title) {
                    $tb.removeClass("water");
                }
            });

            $(".water").focus(function () {
                $tb = $(this);
                if ($tb.val() == this.title) {
                    $tb.val("");
                    $tb.removeClass("water");
                }
            });

            $(".water").blur(function () {
                $tb = $(this);
                if ($.trim($tb.val()) == "") {
                    $tb.val(this.title);
                    $tb.addClass("water");
                }
            });
        });        
 
    </script>
</asp:Content>
